axios.defaults.baseURL = 'http://ajax-api.itheima.net';
const list = document.querySelector('.top');

const fn = async () => {
  const { data: res } = await axios({
    method: 'GET',
    url: '/api/category/top',
  });
  console.log(res);

  const newArr = res.data.map((item) => {
    return axios({
      method: 'GET',
      url: '/api/category/sub?id=' + item.id,
    });
  });
console.log(newArr);

  const str = await Promise.all(newArr);
  const html = str.map(({ data: item }) => {
        console.log(item);
        return `<li>
        <a href="javascript:;">${item.data.name}</a>
        <ul class="sub">${item.data.children
          .map(item => {
            // 第二层渲染
          console.log(item);
          return ` <li>
            <a href="javascript:;">
              <span>${item.name}</span>
              <img src="${item.picture}" alt="">
            </a>
          </li>`
        }).join('')
          }</ul>
      </li>`
      }).join('')
      list.innerHTML = html

};
fn();
